<template>
	<view class="container">
		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="myroom">创建场景</view>
			<view class="plus-icon-container">
				<image class="plus-icon" src="../../static/images/room/more.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 示例的自定义时间选择器 !-->
		<view class="time">
			<long-date type="between" getDayNum="10" :openStatus="true" chooesMaxDay="8" @select="Time"
				class="long_time"  >
			</long-date>
		</view>
		<!-- 列表 -->
		<view class="List">

			<!-- 日期 -->
			<view class="list-item">
				<view class="left-text">重复</view>
				<view class="right-section">
					<view v-if="isDaily" class="right-text" @click="navigateToSelectWeek">
						每日
					</view>

					<view v-else v-for="day in selectedDays" :key="day" class="right-text1"
						@click="navigateToSelectWeek"> {{ day }}</view>

					<image src="../../static/images/mode/right.png" class="right-image"></image>
				</view>
			</view>
			<!-- 标签，铃声 -->
			<view class="list-item" v-for="(item, index) in listItems" :key="index">
				<view class="left-text">{{ item.leftText }}</view>
				<view class="right-section">
					<view v-if="item.leftText === '场景名'" class="right-text" @click="showSceneNameInput">
						{{ item.rightText }}</view>
					<view v-else class="right-text" @click="navigateTo(item.textUrl)">{{ item.rightText }}</view>
					<image src="../../static/images/mode/right.png" class="right-image"></image>
				</view>
			</view>

			<!-- 状态 -->
			<view class="list-item">
				<view class="left-text">状态</view>
				<view class="right-section">
					<switch :checked="modestatus === 'true'" @change="toggleSwitch(device,index)" class="check" />
				</view>
			</view>
		</view>

		<button class="button" type="primary" @click="submitSelection">下一步</button>

		 <uni-popup ref="sceneNamePopup" type="center">
		      <view class="popup-content">
		        <uni-popup-dialog ref="inputClose" mode="input" title="请输入场景名" placeholder="不多于七个字" @confirm="dialogInputConfirm" :value.sync="sceneNameInput">
		        </uni-popup-dialog>
		      </view>
		    </uni-popup>
		  </view>
</template>

<script>
	import longDate from "@/components/long-date/long-date.vue";
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
	  import uniPopupDialog from '@dcloudio/uni-ui/lib/uni-popup-dialog/uni-popup-dialog.vue';

	export default {
		components: {
			longDate,
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				modestatus: 'true',
				selectedDays: [],
				selectedTime: '',
				sceneNameInput: '', // 新增场景名输入框的数据绑定
				listItems: [{
						leftText: '场景名', // 将标签替换为场景名
						rightText: '请输入场景名',
						textUrl: '',
					},
					{
						leftText: '铃声',
						rightText: '雷达',
						textUrl: '/pages/details/details2',
					},
				]
			};
		},
		methods: {
			Time(val) {
				this.selectedTime = val;
				console.log("Selected Time:", this.selectedTime);
			},
			prev() {
				uni.navigateTo({
					url: '/pages/mode/addmode'
				});
			},
			updateSelectedDays() {
				uni.getStorage({
					key: 'selectedItems',
					success: (res) => {
						this.selectedDays = res.data;
					},
					fail: (err) => {
					            console.error('Failed to get selectedItems from storage', err);
					        }
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			navigateToSelectWeek() {
							this.navigateTo('/pages/mode/selectweek');
						},
			submitSelection() {
				 this.updateSelectedDays();
				 if (!this.sceneNameInput.trim()) {
				        uni.showToast({
				            title: '场景名不能为空',
				            icon: 'none'
				        });
				        return; // 阻止跳转
				    }
					console.log("this.selectedTime",this.selectedTime);
					//console.log("this.this.selectedDays:",this.selectedDays);
					// this.newMode.day = JSON.stringify(this.selectedDays);
				// 将需要传递的数据编码成 URL 查询字符串
				const selectedDaysStr = encodeURIComponent(JSON.stringify(this.selectedDays));
				const modeStatusStr = encodeURIComponent(this.modestatus);
				const selectedTimeStr = encodeURIComponent(JSON.stringify(this.selectedTime)); // 确保数据编码正确
				 const sceneNameStr = encodeURIComponent(this.sceneNameInput); // 传递场景名
				console.log("11111", this.selectedDays, "22222", this.modestatus, "33333", this.selectedTime,"4444",this.sceneNameInput);
				console.log("this.sceneNameInput",this.sceneNameInput);
				uni.navigateTo({
					url: `/pages/mode/selectweek2?selectedDays=${selectedDaysStr}&modeStatus=${modeStatusStr}&selectedTime=${selectedTimeStr}&sceneName=${sceneNameStr}`
				});
			},
			showSceneNameInput() {
				this.$refs.sceneNamePopup.open();
			},
			dialogInputConfirm(value) {
			       if (value.length <= 7) {
			                 this.sceneNameInput = value;
			                 this.listItems[0].rightText = this.sceneNameInput;
			                 this.$refs.sceneNamePopup.close();
			               } else {
			                 uni.showToast({
			                   title: '输入不能超过七个字',
			                   icon: 'none'
			                 });
			               }
			             }
			           },
		onShow() {

			this.updateSelectedDays();
		},
		computed: {
			isDaily() {
				return this.selectedDays.length === 7;
			}
		},
	};
</script>
<style>
	page {
		background-color: #f9f9f9;
	}

	.container {
		/* padding: 20px; */
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		border-bottom: 1.5px solid #f0f0f0;
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;

		padding: 3px;
	}

	.myroom {
		flex: 7;
		font-size: 18px;
		color: #0a0d14;
		font-weight: bold;
		text-align: center;
	}

	.plus-icon-container {
		position: relative;
	}

	.plus-icon {
		width: 30px;
		height: 40px;
		object-fit: contain;
		margin-right: 10px;
	}

	.time {
		padding-top: 132rpx;
		padding-left: 33rpx;
		padding-right: 33rpx;
		border-radius: 190px;
	}

	.long_time {
		border-radius: 190px;
	}

	.List {
		margin-top: 110rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
	}

	.list-item {
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #eee;
	}

	.left-text {
		margin-left: 18rpx;
		flex: 1;
		font-size: 39rpx;
	}

	.right-section {
		display: flex;
		align-items: center;
	}

	.right-text {
		margin-right: 10px;
		font-size: 16px;
		color: #a5a5a5;
	}

	.right-text1 {
		margin-right: -1rpx;
		font-size: 16px;
		color: #a5a5a5;
	}

	.right-image {
		width: 30rpx;
		height: 30rpx;
	}

	.flex_between1 {
		display: flex;
		justify-content: space-around;
		padding-top: 82rpx;

	}

	.button-con {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-color: #405ff2;
		color: white;
		border-radius: 150rpx;
		text-align: center;
		width: 400rpx;
		height: 100rpx;
	}

	.button {
		margin-top: 102rpx;
		height: 12%;
		width: 40%;
		background-color: #598ff2;
	}
</style>